<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Bootstrap相关文件  -->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="css/service_record.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/angular-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/angular-cookies.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/i18n/angular-locale_zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.1.4/ui-bootstrap-tpls.min.js"></script>
    <link href="css/custom.bootstrap.css" rel="stylesheet"/>
    <link href="css/datepicker.css" rel="stylesheet"/>
    <script src="js/globalVar.js"></script>
    <title>E家月嫂</title>
</head>
<body>

<!-- 导航栏 -->
<nav ng-controller="navCtrl" class="navbar navbar-default" role="navigation"
     style="padding:8px 0; margin-bottom: 0; max-height: 60px; min-width:800px;overflow: hidden">
    <ul class="nav nav-pills nav-justified">

        <li>
            <div class="navbar-header" style="min-width: 400px;">
                <a class="navbar-brand" href="#" id="page-title">E家月嫂-后台录入系统 > 月嫂服务记录</a>
            </div>
        </li>

        <li>
            <p class="navbar-text navbar-right" style="margin-right:50px;"><a href="modify-password.html"
                                                                              class="navbar-link"
                                                                              style="color:#0000CC;">修改密码</a></p>
            <p class="navbar-text navbar-right"><a href="javascript:logout()" class="navbar-link"
                                                   style="color:#0000CC;">登出</a></p>
            <p class="navbar-text navbar-right">{{name}}</p>
        </li>

    </ul>
</nav>

<!-- 基本资料 -->
<div ng-controller="baseInfoCtrl" class="row" style="width:100%;">
    <div class="personal-wrapper"
         style="height:300px;overflow: hidden;max-width:100%;margin-left:30px;margin-right:120px;">
        <div class="certification-header">
            <p style="font-size: 24px;font-weight: bold;padding-left: 15px;">基本资料</p>
        </div>
        <div class="col-xs-6" style="min-width: 430px;max-width: 500px;">
            <div class="head-img" style="margin-top:18px;margin-left: 15px;">
                <img id="head_img" src="img/headimg.png" ng-src="{{info.head_img_url}}" width="165px;" height="180px;"/>
            </div>
            <div class="personal-info">
                <div class="personal-info-item-display secondary">
                    <span>编号：</span>
                    <span>{{mid}}</span>
                </div>
                <div class="personal-info-item-display secondary">
                    <span>姓名：</span>
                    <span id="name">{{info.name}}</span>
                </div>
                <div class="personal-info-item-display secondary">
                    <span>年龄：</span>
                    <span id="age">{{info.age}}</span>
                </div>
                <div class="personal-info-item-display secondary">
                    <span>籍贯：</span>
                    <span id="birth_place">{{info.birth_place}}</span>
                </div>
                <div class="personal-info-item-display secondary">
                    <span>手机：</span>
                    <span id="phone">{{info.phone}}</span>
                </div>
                <div class="personal-info-item-display secondary">
                    <span>学历：</span>
                    <span id="education">{{info.education}}</span>
                </div>
            </div>
        </div>

        <div class="col-xs-6" style="min-width:300px; float:right;">

            <div class="rating-number" style="height:100%; float:right;">
                <div class="star-user-number"><span class="secondary" id="five_stars">{{grade[5]}}</span></div>
                <div class="star-user-number"><span class="secondary" id="four_stars">{{grade[4]}}</span></div>
                <div class="star-user-number"><span class="secondary" id="three_stars">{{grade[3]}}</span></div>
                <div class="star-user-number"><span class="secondary" id="two_stars">{{grade[2]}}</span></div>
                <div class="star-user-number"><span class="secondary" id="one_star">{{grade[1]}}</span></div>
            </div>

            <div class="user-rating" style="width:160px;float:right;">
                <div class="star-rating">
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                </div>
            </div>

            <div class="user-judge secondary" style="width:80px;float:right;">
                <div style="margin-top:15px;"><span>用户评价：</span></div>
                <div style="margin-top:40px;"><span style="font-size: 24px;">{{avgGrade | number:1}}分</span></div>
            </div>

        </div>
    </div>
</div>

<!-- 添加服务记录 -->
<div ng-controller="addRecordCtrl" class="row" style="width:100%">
    <div class="certification-wrapper" style="margin-left:30px;">
        <div class="header-wrapper">
            <div class="certification-header" style="display:inline-block;height:34px;">
                <p style="font-size: 24px;font-weight: bold;padding-left: 15px;">服务记录</p>
            </div>
            <button type="button" id="addRecordBtn" class="btn btn-success mybtn" ng-click="showAddRecordForm()">添加记录
            </button>
        </div>
        <div class="add-record-wrapper container row" style="width: 100%" ng-show="showForm">
            <div class="col-xs-4 container-fluid">
                <!--<div style="display: inline-block">-->

                <!--<div id="datePicker" style="visibility: hidden;">-->

                <!--</div>-->

                <!--</div>-->
                <div class="text-center row" style="min-width:360px;">
                    <div class="col-xs-1" ng-click="preYear()"><i class="fa fa-backward" aria-hidden="true"></i></div>
                    <div class="col-xs-1" ng-click="preMonth()"><i class="fa fa-chevron-left" aria-hidden="true"
                                                                   style="color: #939394"></i></div>
                    <div class="col-xs-4">
                        <div style="background-color: #E2E2E4;border-radius: 20px;color: #939394;margin-left: 2px;margin-right: 2px">
                            {{year}}
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div style="background-color: #E2E2E4;border-radius: 20px;color: #939394;margin-left: 2px;margin-right: 2px">
                            {{month + 1}}月
                        </div>
                    </div>
                    <div class="col-xs-1" ng-click="nextMonth()"><i class="fa fa-chevron-right" aria-hidden="true"
                                                                    style="color: #939394"></i></div>
                    <div class="col-xs-1" ng-click="nextYear()"><i class="fa fa-forward" aria-hidden="true"></i></div>
                </div>
                <div class="container-fluid" style="background-color: #E2E2E4;border-radius: 8px;color: #939394">
                    <div class="text-center row">
                        <div class="col-xs-1-7">日</div>
                        <div class="col-xs-1-7">一</div>
                        <div class="col-xs-1-7">二</div>
                        <div class="col-xs-1-7">三</div>
                        <div class="col-xs-1-7">四</div>
                        <div class="col-xs-1-7">五</div>
                        <div class="col-xs-1-7">六</div>
                    </div>
                    <div class="text-center row" ng-repeat="weekDates in selectedMonthCalendar">
                        <div class="col-xs-1-7 active" ng-repeat="date in weekDates"
                             ng-class="{'serve-day':(isServeDay(date)||date.getTime()===startDate.getTime())}">
                            <div ng-click="setStartDate(date)" ng-if="inSelectedMonth(date)"
                                 ng-class="{'today':isToday(date),'date-clickable':date.getTime()<=today.getTime(),'date-disabled':date.getTime()>today.getTime()}">{{date.getDate()}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid"
                     style="background-color: #F3F3F8; border-radius: 8px;color: #939394;margin-top: 5px">
                    <div class="text-center row" ng-repeat="weekDates in nextMonthCalendar">
                        <div class="col-xs-1-7 active" ng-repeat="date in weekDates"
                             ng-class="{'serve-day':(isServeDay(date)||date.getTime()===startDate.getTime())&&inNextMonth(date)}">
                            <div ng-click="setStartDate(date)" ng-if="inNextMonth(date)"
                                 ng-class="{'today':isToday(date),'date-clickable':date.getTime()<=today.getTime(),'date-disabled':date.getTime()>today.getTime()}">{{date.getDate()}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="add-record-right col-xs-7">
                <div style="width:100%;height:54px;">
                    <button type="button" class="btn btn-success add_record_btn" ng-click="save()">保存</button>
                    <button type="button" class="btn add_record_btn" ng-click="cancel()">取消</button>
                </div>
                <div style="height:90%;">

                    <table class="mytable">
                        <tr>
                            <td><span class="black-span">服务时间：</span><span id="serve_time" class="secondary">{{startDate | date:'yyyy.M.d'}}-{{endDate | date:'M.d'}}</span>
                            </td>
                            <td>
                                <span class="black-span" style="margin-right: 10px">服务周期：</span>
                                <div class="checkbox-item" ng-repeat="d in durationSet">
                                    <label>
                                        <input type="checkbox" ng-model="d.checked" ng-click="setDuration(d)"/>
                                        <span ng-if="!$last" class="black-span">{{d.value}}天</span>
                                        <input ng-if="$last" type="number" style="width:60px;height:20px;"
                                               ng-model="d.value" ng-disabled="!d.checked"
                                               ng-change="onCustomDurationChange()">
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="black-span">雇主：</span><span style="visibility: hidden;">填充</span><input
                                    type="text" class="my-input" ng-model="employer">
                            </td>
                            <td><span class="black-span">身份证号：</span><input type="text" class="my-input longer-input"
                                                                            ng-model="idNum">
                            </td>
                        </tr>
                        <tr>
                            <td><span class="black-span">联系电话：</span><input type="text" class="my-input"
                                                                            ng-model="phone">
                            </td>
                            <td><span class="black-span">家庭住址：</span><input type="text" class="my-input longer-input"
                                                                            ng-model="address">
                            </td>
                        </tr>
                        <tr>
                            <td><span class="black-span">宝宝数量：</span><input type="number" min="1" class="my-input"
                                                                            ng-model="babyNum"></td>
                            <td>
                                <span class="black-span">家庭类型：</span>
                                <div class="checkbox-item" ng-repeat="type in familyTypeSet">
                                    <label>
                                        <input type="checkbox" name="fuzq" ng-model="type.checked"><span
                                            class="black-span">{{type.value}}</span>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="evaluate-span secondary">评价：</span>
                                <div class="evaluate-star">
                                    <i class="fa fa-star"
                                       aria-hidden="true"
                                       ng-repeat="i in [1,2,3,4,5]"
                                       ng-class="{'icon-red':$index<grade||$index<=hoverIndex, 'secondary':!($index<grade||$index<=hoverIndex)}"
                                       ng-mouseenter="setHoverIndex($index)"
                                       ng-mouseleave="setHoverIndex(-1)"
                                       ng-click="setGrade($index+1);"></i>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div style="height:30%;margin-left:30px;margin-top:15px;">
                        <textarea style="width:90%; height:100%;" ng-model="comment"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 服务记录 -->
<div ng-controller="recordCtrl">
    <div class="row" style="width:100%;">
        <div class="certification-wrapper" style="margin-left:30px;">
            <div class="record-line" ng-repeat="record in records">
                <div class="record-line-wrapper">
                    <div class="record-upper">
                        <div class="record-upper-left">
                            <table class="mytable">
                                <tr>
                                    <td><span>雇主：</span><span>{{record.employer}}</span></td>
                                    <td><span>身份证号：</span><span>{{record.id_num}}</span></td>
                                </tr>
                                <tr>
                                    <td><span>服务时间：</span><span>{{record.start | date:'yyyy.M.d'}}-{{record.end | date:'M.d'}}</span>
                                    </td>
                                    <td><span>服务周期：</span><span>{{record.duration}}</span><span>天</span></td>
                                </tr>
                                <tr>
                                    <td><span>联系电话：</span><span>{{record.phone}}</span></td>
                                    <td><span>家庭住址：</span><span>{{record.address}}</span></td>
                                </tr>
                                <tr>
                                    <td><span>宝宝数量：</span><span>{{record.baby_num}}</span><span>个</span></td>
                                    <td><span>家庭类型：</span><span>{{record.family_type}}</span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="record-upper-right">
                            <div style="padding-top:10px;" class="secondary">
                                <span class="evaluate-span">评价：</span>
                                <div class="evaluate-star">
                                    <i class="fa fa-star icon-red" aria-hidden="true" ng-repeat="x in record.temp"></i>
                                </div>
                            </div>
                            <div style="padding-top:5px;" class="secondary">
                                <span class="evaluate-span">评价时间：</span><span class="evaluate-span">{{record.create_date|date:'yyyy.M.d'}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="record-bottom">
                        <div class="evaluate-content">
                            <span>{{record.comment}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部页面选择 -->
    <div class="row" style="width:100%;">
        <div class="page-wrapper">
            <div class="set-number page-block">
                <span style="color:red;font-weight: bold;;">每页显示10条服务记录</span>
            </div>
            <div class="np-page page-block">
                <a ng-click="previous()"><span class="previous-page">上一页</span></a>
                <ul class="pagination" style="margin: 0; padding:0;position:relative;top:10px;">
                    <li ng-repeat="page in pages">
                        <a ng-click="selectPage(page)"> <span
                                ng-class="{'active': isActivePage(page)}">{{ page }}</span></a>
                    </li>
                </ul>
                <a ng-click="next()"><span class="next-page">下一页</span></a>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/service_record.js"></script>
<script src="js/maternity.service.js"></script>
<script src="js/record.service.js"></script>
<script src="js/user.service.js"></script>
</body>
</html>